import React, { useState } from 'react';
import {
  Box,
  CardBase,
  CardSection,
  Dialog,
  Empty,
  Grid,
  GridItem,
  InfoCard,
  MainButton,
  MainColorType,
  makeToast,
  ModalHeader,
  SecondaryButton,
  Text,
} from '@nova-hf/ui';
import Authentication from 'beta/store/authentication';
import { IContext } from 'beta/typings/context';
import { formatPrice } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import getConfig from 'next/config';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
  DeviceContractItem,
  EquipmentRentalStatus,
  useDeactivateContractItemMutation,
  useRemoveUndeliveredDeviceItemsMutation,
} from 'typings/graphql';

import { SectionHeader } from '../comoponents/SectionHeader';

import {
  COMPANY_KASTARI_ID,
  COMPANY_KASTARI_PRO_ID,
  COMPANY_ROUTER_ID,
  COMPANY_ROUTER_PRO_ID,
  COMPANY_SWITCH,
  KASTARI_VARIANT_ID,
  ROUTER_25X_VAIANT_ID,
  ROUTER_VARIANT_ID,
} from './FiberServiceContainer';

const { publicRuntimeConfig } = getConfig();
const redirectURL = publicRuntimeConfig.NOVA_WEB_URL ?? '';

type FiberItemsProps = {
  color?: MainColorType;
  devices: Array<DeviceContractItem> | undefined;
  authentication?: Authentication;
  isAlltSaman?: boolean;
  contractId: string;
  deviceRefetch: () => void;
};

const FiberItems = ({
  color,
  devices,
  authentication,
  contractId,
  deviceRefetch,
  isAlltSaman,
}: FiberItemsProps) => {
  const { t } = useTranslation(['fiber']);
  const nextRouter = useRouter();
  const customerId = nextRouter?.query?.customerId ?? '';
  const serviceId = nextRouter?.query?.serviceId ?? '';
  const isStaff = authentication?.isStaff;
  const kastarar = devices?.filter((item) => item?.variant?.id === KASTARI_VARIANT_ID);
  const routers = devices?.filter((item) => item?.variant?.id === ROUTER_VARIANT_ID);
  const routers25x = devices?.filter((item) => item?.variant?.id === ROUTER_25X_VAIANT_ID);
  const companyRouters = devices?.filter((item) => item?.variant?.id === COMPANY_ROUTER_ID);
  const companyRoutersPro = devices?.filter((item) => item?.variant?.id === COMPANY_ROUTER_PRO_ID);
  const companyExtenders = devices?.filter((item) => item?.variant?.id === COMPANY_KASTARI_ID);
  const companyExtendersPro = devices?.filter(
    (item) => item?.variant?.id === COMPANY_KASTARI_PRO_ID,
  );
  const companySwitches = devices?.filter((item) => item?.variant?.id === COMPANY_SWITCH);

  const [showModal, setShowModal] = useState(false);
  const [canRemove, setCanRemove] = useState(true); // cannot remove if device is currently in navision
  const [selectedVariantId, setSelectedVaraintId] = useState<string>('');
  const [deviceContractItemId, setDeviceContractId] = useState<string>('');

  const [removeDevices, { loading: loadingRemoveDevices }] =
    useRemoveUndeliveredDeviceItemsMutation({
      onCompleted(data) {
        if (data?.removeUndeliveredDeviceItems?.id) {
          makeToast.success(t('fiberDevices.removeSuccess'), '');
        }
        setShowModal(false);
        deviceRefetch();
      },
      onError(error) {
        if (error) {
          setShowModal(false);
          makeToast.danger(t('fiberDevices.removeFailure'), error.message);
        }
      },
    });

  const [returnOldRouter, { loading: loadingReturnRouter }] = useDeactivateContractItemMutation();

  const handleSelectDevice = (deviceContractItemId: string, variantId: string) => {
    setSelectedVaraintId(variantId);
    setDeviceContractId(deviceContractItemId);
    const selectedDevice = devices?.find((item) => item.id === deviceContractItemId);
    const selectedDeviceIsInNavision = selectedDevice?.rentalInfo?.externalOrderId;
    if (selectedDeviceIsInNavision) setCanRemove(false);
    setShowModal(true);
  };

  const handleRemoveDevice = () => {
    removeDevices({
      variables: {
        input: {
          id: contractId,
          deviceContractItemId,
        },
      },
    });
  };

  const returnRouter = async (id: string) => {
    await returnOldRouter({
      variables: {
        input: {
          id: contractId,
          contractItemId: id,
        },
      },
    });
  };

  const hasDevices = !!devices?.length;

  const activeRouters = routers?.filter(
    (router) =>
      router.status === EquipmentRentalStatus.Active && router.trackingCode !== 'NovaRouter',
  );
  const activeRouterCount = activeRouters?.length ?? 0;
  const activeRouterName = activeRouters?.find((item) => item.variant?.id === ROUTER_VARIANT_ID)
    ?.variant?.name;
  const pendingRouters = routers?.filter(
    (router) => router.status === EquipmentRentalStatus.Pending,
  );

  const activeOldRouters = routers?.filter(
    (router) =>
      router.status === EquipmentRentalStatus.Active && router.trackingCode === 'NovaRouter',
  );
  const activeOldRouterCount = activeOldRouters?.length ?? 0;
  const activeOldRouterName = activeOldRouters?.find(
    (item) => item.variant?.id === ROUTER_VARIANT_ID,
  )?.variant?.name;

  const activeRouters25x = routers25x?.filter(
    (router) => router.status === EquipmentRentalStatus.Active,
  );
  const activeRouter25xCount = activeRouters25x?.length ?? 0;
  const activeRouter25xName = activeRouters25x?.find(
    (item) => item.variantId === ROUTER_25X_VAIANT_ID,
  )?.variant?.name;
  const pendingRouters25x = routers25x?.filter(
    (router) => router.status === EquipmentRentalStatus.Pending,
  );

  const activeKastarar = kastarar?.filter(
    (kastari) => kastari.status === EquipmentRentalStatus.Active,
  );
  const activeKastararCount = activeKastarar?.length;
  const pendingKastarar = kastarar?.filter(
    (kastari) => kastari.status === EquipmentRentalStatus.Pending,
  );

  const activeCompanyRouters = companyRouters?.filter(
    (router) => router.status === EquipmentRentalStatus.Active,
  );
  const activeCompanyRouterCount = activeCompanyRouters?.length ?? 0;
  const activeCompanyRouterName = activeCompanyRouters?.find(
    (item) => item.variant?.id === COMPANY_ROUTER_ID,
  )?.variant?.name;
  const pendingCompanyRouters = companyRouters?.filter(
    (router) => router.status === EquipmentRentalStatus.Pending,
  );

  const activeCompanyProRouters = companyRoutersPro?.filter(
    (router) => router.status === EquipmentRentalStatus.Active,
  );
  const activeCompanyProRouterCount = activeCompanyProRouters?.length ?? 0;
  const activeCompanyProRouterName = activeCompanyProRouters?.find(
    (item) => item.variant?.id === COMPANY_ROUTER_PRO_ID,
  )?.variant?.name;
  const pendingCompanyProRouters = companyRoutersPro?.filter(
    (router) => router.status === EquipmentRentalStatus.Pending,
  );
  const activeCompanyKastarar = companyExtenders?.filter(
    (kastari) => kastari.status === EquipmentRentalStatus.Active,
  );
  const activeCompanyKastararCount = activeCompanyKastarar?.length;
  const pendingCompanyKastarar = companyExtenders?.filter(
    (kastari) => kastari.status === EquipmentRentalStatus.Pending,
  );
  const activeCompanyProKastarar = companyExtendersPro?.filter(
    (kastari) => kastari.status === EquipmentRentalStatus.Active,
  );
  const activeCompanyProKastararCount = activeCompanyProKastarar?.length;
  const pendingCompanyProKastarar = companyExtendersPro?.filter(
    (kastari) => kastari.status === EquipmentRentalStatus.Pending,
  );
  const activeCompanySwitches = companySwitches?.filter(
    (s) => s.status === EquipmentRentalStatus.Active,
  );
  const activeCompanySwitchesCount = activeCompanySwitches?.length;
  const pendingCompanySwitches = companySwitches?.filter(
    (s) => s.status === EquipmentRentalStatus.Pending,
  );

  const hasNonCompanyDevices =
    !!activeRouters?.length ||
    !!pendingRouters?.length ||
    !!activeRouters25x?.length ||
    !!pendingRouters25x?.length ||
    !!activeKastarar?.length ||
    !!pendingKastarar?.length;

  const kastaraPrice =
    activeKastarar?.find((kastari) => kastari.variantId === KASTARI_VARIANT_ID)?.variant
      ?.monthlyCharge ?? 0;
  const alltSamanDiscount = isAlltSaman ? kastaraPrice : 0;
  const kastaraTotalPrice =
    activeKastararCount && kastaraPrice
      ? formatPrice(activeKastararCount * kastaraPrice - alltSamanDiscount)
      : formatPrice(0);

  return (
    <>
      <Box>
        <SectionHeader
          headerTitle={t('fiberItems.activeDevices')}
          rightActionNode={
            isStaff && serviceId ? (
              <SecondaryButton
                colorScheme={color}
                icon="add"
                text={t('fiber:fiberItems.addDevices')}
                renderAs="a"
                wrapper={(link) => (
                  <Link
                    passHref
                    href={`/beta/${customerId}/thjonustur/${serviceId}/bunadarleiga`}
                    legacyBehavior
                  >
                    {link}
                  </Link>
                )}
              />
            ) : hasNonCompanyDevices || !hasDevices ? (
              <SecondaryButton
                colorScheme={color}
                icon="add"
                text={t('fiber:fiberItems.addDevices')}
                renderAs="a"
                href={`${redirectURL}/netid/kastarinn/komdu/1`}
              />
            ) : null
          }
        />
        {hasDevices ? (
          <Grid gridTemplate={{ sm: 6, md: 12 }}>
            {!!activeRouterCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'router',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    hasBackgroundFilled: false,
                    placement: 'top-start',
                    size: 16,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {activeRouters[0].trackingCode}
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Ráter' })
                              : t('fiberItems.returnCustomer', { device: 'ráter' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeRouterCount} ${activeRouterName}`}
                  description={formatPrice(
                    activeRouters?.find((router) => router.variantId === ROUTER_VARIANT_ID)?.variant
                      ?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!activeOldRouterCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'router',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    hasBackgroundFilled: false,
                    placement: 'top-start',
                    size: 16,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnOld')
                              : t('fiberItems.returnCustomer', { device: 'ráter' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  {...(isStaff &&
                    activeOldRouters && {
                      menuItems: [
                        {
                          onClick: () => {
                            returnRouter(activeOldRouters[0].id);
                          },
                          text: t('fiberItems.returnDevice', { device: 'ráter' }),
                        },
                      ],
                    })}
                  shortTitle={`${activeOldRouterCount} ${activeOldRouterName}`}
                  description={formatPrice(
                    activeOldRouters?.find((router) => router.variantId === ROUTER_VARIANT_ID)
                      ?.variant?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}

            {!!activeCompanyRouterCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'router',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    hasBackgroundFilled: false,
                    placement: 'top-start',
                    size: 16,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Ráter' })
                              : t('fiberItems.returnCustomer', { device: 'ráter' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeCompanyRouterCount} ${activeCompanyRouterName}`}
                  description={formatPrice(
                    activeCompanyRouters?.find((router) => router.variantId === COMPANY_ROUTER_ID)
                      ?.variant?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!pendingCompanyRouters?.length && (
              <GridItem key={pendingCompanyRouters[0].id} gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  isDisabled={
                    !!pendingCompanyRouters[0].rentalInfo?.status &&
                    pendingCompanyRouters[0].rentalInfo?.status !== EquipmentRentalStatus.Active
                  }
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  {...(isStaff && {
                    menuItems: [
                      {
                        onClick: () => {
                          handleSelectDevice(pendingCompanyRouters[0].id ?? '', COMPANY_ROUTER_ID);
                        },
                        text: t('fiberItems.removeDevice', { device: 'ráter' }),
                      },
                    ],
                  })}
                  icon={{
                    icon: 'router',
                  }}
                  shortTitle={`${pendingCompanyRouters?.length} ${pendingCompanyRouters[0]?.variant?.name}`}
                  description={formatPrice(pendingCompanyRouters[0]?.variant?.monthlyCharge ?? 0)}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!pendingRouters?.length && (
              <GridItem key={pendingRouters[0]?.id} gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  isDisabled={
                    !!pendingRouters[0]?.rentalInfo?.status &&
                    pendingRouters[0]?.rentalInfo?.status !== EquipmentRentalStatus.Active
                  }
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  {...(isStaff && {
                    menuItems: [
                      {
                        onClick: () => {
                          handleSelectDevice(pendingRouters[0]?.id ?? '', ROUTER_VARIANT_ID);
                        },
                        text: t('fiberItems.removeDevice', { device: 'ráter' }),
                      },
                    ],
                  })}
                  icon={{
                    icon: 'router',
                  }}
                  shortTitle={`${pendingRouters.length} ${pendingRouters[0]?.variant?.name}`}
                  description={formatPrice(pendingRouters[0]?.variant?.monthlyCharge ?? 0)}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!activeRouter25xCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'router',
                  }}
                  tooltip={{
                    color: 'grey500',
                    placement: 'top-start',
                    size: 16,
                    hasBackgroundFilled: true,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Ráter' })
                              : t('fiberItems.returnCustomer', { device: 'ráter' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeRouter25xCount} ${activeRouter25xName}`}
                  description={formatPrice(
                    activeRouters25x?.find((router) => router.variantId === ROUTER_25X_VAIANT_ID)
                      ?.variant?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!pendingRouters25x?.length && (
              <>
                <GridItem key={pendingRouters25x[0]?.id} gridColumn={{ sm: 'span3', md: 'span6' }}>
                  <InfoCard
                    isDisabled={
                      !!pendingRouters25x[0]?.rentalInfo?.status &&
                      pendingRouters25x[0]?.rentalInfo?.status !== EquipmentRentalStatus.Active
                    }
                    boxShadow="none"
                    color={color}
                    isTitleColored={true}
                    {...(isStaff && {
                      menuItems: [
                        {
                          onClick: () => {
                            handleSelectDevice(
                              pendingRouters25x[0]?.id ?? '',
                              ROUTER_25X_VAIANT_ID,
                            );
                          },
                          text: t('fiberItems.removeDevice', { device: 'ráter' }),
                        },
                      ],
                    })}
                    icon={{
                      icon: 'router',
                    }}
                    shortTitle={`${pendingRouters25x?.length} ${pendingRouters25x[0]?.variant?.name}`}
                    description={formatPrice(pendingRouters25x[0]?.variant?.monthlyCharge ?? 0)}
                    extraDescription={t('fiberItems.unit')}
                  />
                </GridItem>
              </>
            )}
            {!!activeCompanyProRouterCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'router',
                  }}
                  tooltip={{
                    color: 'grey500',
                    placement: 'top-start',
                    size: 16,
                    hasBackgroundFilled: true,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Ráter' })
                              : t('fiberItems.returnCustomer', { device: 'ráter' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeCompanyProRouterCount} ${activeCompanyProRouterName}`}
                  description={formatPrice(
                    activeCompanyProRouters?.find(
                      (router) => router.variantId === COMPANY_ROUTER_PRO_ID,
                    )?.variant?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!pendingCompanyProRouters?.length && (
              <>
                <GridItem
                  key={pendingCompanyProRouters[0]?.id}
                  gridColumn={{ sm: 'span3', md: 'span6' }}
                >
                  <InfoCard
                    isDisabled={
                      !!pendingCompanyProRouters[0]?.rentalInfo?.status &&
                      pendingCompanyProRouters[0]?.rentalInfo?.status !==
                        EquipmentRentalStatus.Active
                    }
                    boxShadow="none"
                    color={color}
                    isTitleColored={true}
                    {...(isStaff && {
                      menuItems: [
                        {
                          onClick: () => {
                            handleSelectDevice(
                              pendingCompanyProRouters[0]?.id ?? '',
                              COMPANY_ROUTER_PRO_ID,
                            );
                          },
                          text: t('fiberItems.removeDevice', { device: 'ráter' }),
                        },
                      ],
                    })}
                    icon={{
                      icon: 'router',
                    }}
                    shortTitle={`${pendingCompanyProRouters?.length} ${pendingCompanyProRouters[0]?.variant?.name}`}
                    description={formatPrice(
                      pendingCompanyProRouters[0]?.variant?.monthlyCharge ?? 0,
                    )}
                    extraDescription={t('fiberItems.unit')}
                  />
                </GridItem>
              </>
            )}
            {!!activeKastararCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'kastari',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    placement: 'top-start',
                    hasBackgroundFilled: false,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Kastara' })
                              : t('fiberItems.returnCustomer', { device: 'kastara' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={
                    activeKastararCount < 2
                      ? `${activeKastararCount} Kastari`
                      : `${activeKastararCount} Kastarar`
                  }
                  description={kastaraTotalPrice}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!activeCompanyKastararCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'kastari',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    placement: 'top-start',
                    hasBackgroundFilled: false,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Kastara' })
                              : t('fiberItems.returnCustomer', { device: 'kastara' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeCompanyKastararCount} ${activeCompanyKastarar[0]?.variant?.name}`}
                  description={formatPrice(
                    activeCompanyKastarar?.find(
                      (kastari) => kastari.variantId === COMPANY_KASTARI_ID,
                    )?.variant?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!activeCompanyProKastararCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'kastari',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    placement: 'top-start',
                    hasBackgroundFilled: false,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Kastara' })
                              : t('fiberItems.returnCustomer', { device: 'kastara' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeCompanyProKastararCount} ${activeCompanyProKastarar[0]?.variant?.name}`}
                  description={formatPrice(
                    activeCompanyProKastarar?.find(
                      (kastari) => kastari.variantId === COMPANY_KASTARI_PRO_ID,
                    )?.variant?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!activeCompanySwitchesCount && (
              <GridItem gridColumn={{ sm: 'span3', md: 'span6' }}>
                <InfoCard
                  boxShadow="none"
                  color={color}
                  isTitleColored={true}
                  icon={{
                    icon: 'postBox',
                  }}
                  tooltip={{
                    icon: 'info',
                    color: color,
                    placement: 'top-start',
                    hasBackgroundFilled: false,
                    children: (
                      <CardBase dottedShadow="none" boxShadow="small">
                        <CardSection>
                          <Text variant="pSmallRegular">
                            {isStaff
                              ? t('fiberItems.returnStaff', { device: 'Svissi' })
                              : t('fiberItems.returnCustomer', { device: 'svissi' })}
                          </Text>
                        </CardSection>
                      </CardBase>
                    ),
                  }}
                  shortTitle={`${activeCompanySwitchesCount} ${activeCompanySwitches[0]?.variant?.name}`}
                  description={formatPrice(
                    activeCompanySwitches?.find((s) => s.variantId === COMPANY_SWITCH)?.variant
                      ?.monthlyCharge ?? 0,
                  )}
                  extraDescription={t('fiberItems.unit')}
                />
              </GridItem>
            )}
            {!!pendingKastarar?.length && (
              <>
                <GridItem key={pendingKastarar[0]?.id} gridColumn={{ sm: 'span3', md: 'span6' }}>
                  <InfoCard
                    isDisabled
                    boxShadow="none"
                    color={color}
                    isTitleColored={true}
                    {...(isStaff && {
                      menuItems: [
                        {
                          onClick: () => {
                            handleSelectDevice(pendingKastarar[0]?.id ?? '', KASTARI_VARIANT_ID);
                          },
                          text: t('fiberItems.removeDevice', { device: 'kastara' }),
                        },
                      ],
                    })}
                    icon={{
                      icon: 'kastari',
                    }}
                    shortTitle={
                      pendingKastarar?.length < 2
                        ? `${pendingKastarar?.length} Kastari`
                        : `${pendingKastarar?.length} Kastarar`
                    }
                    description={formatPrice(pendingKastarar[0]?.variant?.monthlyCharge ?? 0)}
                    extraDescription={t('fiberItems.unit')}
                  />
                </GridItem>
              </>
            )}
            {!!pendingCompanyKastarar?.length && (
              <>
                <GridItem
                  key={pendingCompanyKastarar[0]?.id}
                  gridColumn={{ sm: 'span3', md: 'span6' }}
                >
                  <InfoCard
                    isDisabled
                    boxShadow="none"
                    color={color}
                    isTitleColored={true}
                    {...(isStaff && {
                      menuItems: [
                        {
                          onClick: () => {
                            handleSelectDevice(
                              pendingCompanyKastarar[0]?.id ?? '',
                              COMPANY_KASTARI_ID,
                            );
                          },
                          text: t('fiberItems.removeDevice', { device: 'kastara' }),
                        },
                      ],
                    })}
                    icon={{
                      icon: 'kastari',
                    }}
                    shortTitle={`${pendingCompanyKastarar?.length} ${pendingCompanyKastarar[0]?.variant?.name}`}
                    description={formatPrice(
                      pendingCompanyKastarar[0]?.variant?.monthlyCharge ?? 0,
                    )}
                    extraDescription={t('fiberItems.unit')}
                  />
                </GridItem>
              </>
            )}
            {!!pendingCompanyProKastarar?.length && (
              <>
                <GridItem
                  key={pendingCompanyProKastarar[0]?.id}
                  gridColumn={{ sm: 'span3', md: 'span6' }}
                >
                  <InfoCard
                    isDisabled
                    boxShadow="none"
                    color={color}
                    isTitleColored={true}
                    {...(isStaff && {
                      menuItems: [
                        {
                          onClick: () => {
                            handleSelectDevice(
                              pendingCompanyProKastarar[0].id ?? '',
                              COMPANY_KASTARI_PRO_ID,
                            );
                          },
                          text: t('fiberItems.removeDevice', { device: 'kastara' }),
                        },
                      ],
                    })}
                    icon={{
                      icon: 'kastari',
                    }}
                    shortTitle={`${pendingCompanyProKastarar?.length} ${pendingCompanyProKastarar[0]?.variant?.name}`}
                    description={formatPrice(
                      pendingCompanyProKastarar[0].variant?.monthlyCharge ?? 0,
                    )}
                    extraDescription={t('fiberItems.unit')}
                  />
                </GridItem>
              </>
            )}
            {!!pendingCompanySwitches?.length && (
              <>
                <GridItem
                  key={pendingCompanySwitches[0]?.id}
                  gridColumn={{ sm: 'span3', md: 'span6' }}
                >
                  <InfoCard
                    isDisabled
                    boxShadow="none"
                    color={color}
                    isTitleColored={true}
                    {...(isStaff && {
                      menuItems: [
                        {
                          onClick: () => {
                            handleSelectDevice(pendingCompanySwitches[0]?.id ?? '', COMPANY_SWITCH);
                          },
                          text: t('fiberItems.removeDevice', { device: 'svissi' }),
                        },
                      ],
                    })}
                    icon={{
                      icon: 'postBox',
                    }}
                    shortTitle={`${pendingCompanySwitches?.length} ${pendingCompanySwitches[0]?.variant?.name}`}
                    description={formatPrice(
                      pendingCompanySwitches[0]?.variant?.monthlyCharge ?? 0,
                    )}
                    extraDescription={t('fiberItems.unit')}
                  />
                </GridItem>
              </>
            )}
          </Grid>
        ) : (
          <Empty icon="router" color={color} subtitle={t('fiberItems.noDevices')} />
        )}
      </Box>
      <Dialog
        ariaLabel={t('fiberDevices.modalLabel')}
        onVisibilityChange={(isVisible: boolean) => setShowModal(isVisible)}
        isVisible={showModal}
        width={['11/12', '10/12', '6/12']}
      >
        <Box display="flex" flexDirection="column">
          <ModalHeader
            title={canRemove ? t('fiberDevices.modalTitle') : t('fiberItems.isInNavTitle')}
            color={color}
          />
          <Box marginY={5} flexGrow={1}>
            {canRemove
              ? t('fiberItems.confirmationModalDescription', {
                  device:
                    selectedVariantId === ROUTER_VARIANT_ID ||
                    selectedVariantId === ROUTER_25X_VAIANT_ID ||
                    selectedVariantId === COMPANY_ROUTER_ID ||
                    selectedVariantId === COMPANY_ROUTER_PRO_ID
                      ? 'ráters'
                      : selectedVariantId === COMPANY_SWITCH
                      ? 'svissins'
                      : 'kastarans',
                })
              : t('fiberItems.isInNavDescription', {
                  device:
                    selectedVariantId === ROUTER_VARIANT_ID ||
                    selectedVariantId === ROUTER_25X_VAIANT_ID ||
                    selectedVariantId === COMPANY_ROUTER_ID ||
                    selectedVariantId === COMPANY_ROUTER_PRO_ID
                      ? 'ráter'
                      : selectedVariantId === COMPANY_SWITCH
                      ? 'sviss'
                      : 'kastari',
                })}
          </Box>
          <Box display="flex" flexDirection={['column', 'row', 'row']} gap={4}>
            {canRemove ? (
              <>
                <MainButton
                  text={t('fiberDevices.modalClose')}
                  colorScheme="white"
                  isDisabled={loadingRemoveDevices}
                  onClick={() => setShowModal(false)}
                  dottedShadow="none"
                />
                <MainButton
                  text={t('fiberItems.confirmationModalButton', {
                    device:
                      selectedVariantId === ROUTER_VARIANT_ID ||
                      selectedVariantId === ROUTER_25X_VAIANT_ID ||
                      selectedVariantId === COMPANY_ROUTER_ID ||
                      selectedVariantId === COMPANY_ROUTER_PRO_ID
                        ? 'ráter'
                        : selectedVariantId === COMPANY_SWITCH
                        ? 'svissi'
                        : 'kastara',
                  })}
                  colorScheme={color}
                  icon="checkMark"
                  isLoading={loadingRemoveDevices}
                  onClick={() => handleRemoveDevice()}
                  dottedShadow="none"
                />
              </>
            ) : (
              <MainButton
                text={t('fiberItems.closeButton')}
                colorScheme="white"
                isDisabled={loadingRemoveDevices}
                onClick={() => setShowModal(false)}
                dottedShadow="none"
              />
            )}
          </Box>
        </Box>
      </Dialog>
    </>
  );
};

FiberItems.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    serviceId: query.serviceId,
    namespacesRequired: ['fiber'],
  };
};

export default inject('authentication')(observer(FiberItems));